// 升级大咖弹窗
import React, { Component } from 'react'
import { Button,Form, Input, Modal, Select,Upload ,Icon ,message,Spin ,Checkbox } from 'antd'
import { connect } from 'react-redux'
import {upgradeMaster,upgradeRegistered} from 'actions/userConter'
import {getbasetypefetch} from 'actions/common'
const FormItem = Form.Item
@Form.create({
    mapPropsToFields(props) {
        return {
            domain: Form.createFormField({
            ...props,
            value: '',
            }),
            professionalAblity: Form.createFormField({
            ...props,
            value: [],
            }),
            aboutMaster: Form.createFormField({
            ...props,
            value: '',
            }),
        };
    } 
})

@connect(
    (state, props) => ({
      config: state.config,
    })
)

export default class ModalUpgradeMaster extends Component {
    constructor (props) {
      super(props)
      this.state = {
        CheckboxList:[],//专业能力列表
        companyList:[],//所属领域列表
        addImg:'',//上传的图片路径
        loading:false,//图片上传loading
      }
    }
    componentDidMount() {//组件渲染-查询基础数据
        this.props.dispatch(getbasetypefetch(
            {"type":17},
            (respose) => {
            this.setState({
                companyList:respose.respData.resultData
            })
        }))
        this.props.dispatch(getbasetypefetch(
            {"type":10},
            (respose) => {
            this.setState({
                CheckboxList:respose.respData.resultData
            })
        }))
    }
    addSubmit(callback,e){//新增确定按钮
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if(!err){
                //提交信息接口
                switch(this.props.modalType){
                    case '1':
                        var datajson = {
                            "accountId":this.props.id,
                            "domain":values.domain,//所属领域
                            "introduce":values.aboutMaster,//关于大咖
                            "professionalAblity":values.professionalAblity//专业能力
                        }
                    break;
                    case '2':
                        if(!this.state.addImg){
                            message.error('请上传认证图片');
                            return;
                        }
                        var datajson = {
                            "accountId":this.props.id,
                            "domain":values.domain,//所属领域
                            "introduce":values.aboutMaster,//关于大咖
                            "professionalAblity":values.professionalAblity,//专业能力
                            "certificateImage":'123123'
                        }
                    break;
                }
                this.props.dispatch(
                    ()=>{
                        switch(this.props.modalType){
                            case '1':
                                upgradeMaster(
                                    datajson,
                                    (respose) => {
                                        callback&&callback()
                                        message.success(respose.respMsg)
                                        this.props.ModalCancel();
                                    }
                                )()
                            break;
                            case '2':
                                upgradeRegistered(
                                    datajson,
                                    (respose) => {
                                        callback&&callback()
                                        message.success(respose.respMsg)
                                        this.props.ModalCancel();
                                    }
                                )()
                            break;
                        }
                    }                    
                )              
            }
        });
    }
    render () {
        const {form } = this.props
        const { getFieldDecorator } = form;
        const CheckboxGroup = Checkbox.Group;
        const uploadImg = {
            name: 'file',
            action: global.$GLOBALCONFIG.$ctx+'image/full/path/upload',
            headers: {
              authorization: 'holder ' + sessionStorage.getItem('token'),
            },
            data:{
                type:"1"
            },
            accept:"image/jpg,image/png,image/jpeg",
            beforeUpload: (file)=>{
              const isImg = file.type.substring(0,5) === 'image';
              if (!isImg) {
                message.error('请选择图片');
              }
              this.setState({
                loading:true
              })
              return isImg;
            },
            onChange:(info)=>{
              if (info.file.status !== 'uploading') {
              }
              if (info.file.status === 'done') {
                /* 把返回的路径赋值过去 */
                this.setState({
                    addImg: info.file.response.respData,
                    loading:false
                })
              } else if (info.file.status === 'error') {
                message.error(info.file.response.respMsg);
              }
            },
            showUploadList:false,//不展示上传完成之后的文件列表
        }
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 4 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 16 },
            },
        };
        return (
            //升级大咖弹窗
            <Modal
                maskClosable={false}
                visible={this.props.ModalFlg}
                title="升级大咖"
                onCancel={this.props.ModalCancel}
                footer={[
                <Button key="submit" type="primary"  onClick={this.addSubmit.bind(this,this.props.callback)}>提交</Button>,
                ]}
            >
                <Form>
                    <FormItem label="所属领域" {...formItemLayout}>
                        {
                        getFieldDecorator('domain', {
                            rules: [{
                                required: true,message:"此项必填"
                            }],
                        })(
                            <Select placeholder="请选择所属领域" style={{ width:120 }}>
                                <Select.Option value={''} key={9999}>请选择</Select.Option>
                                {
                                this.state.companyList.map((item,i)=> {
                                    return(                                        
                                        <Select.Option value={item.code} key={i}>{item.value}</Select.Option>
                                    )
                                })
                                }
                            </Select>
                        )
                        }      
                    </FormItem>
                    <FormItem label="专业能力" {...formItemLayout} style={{display:'flex',alignItems:'center'}}>
                        {
                            getFieldDecorator('professionalAblity', {
                                rules: [{
                                    required: true,message:"此项必填"
                                }],
                            })(
                            <CheckboxGroup >
                                {
                                  this.state.CheckboxList.map((item,i)=> {
                                    return(
                                      <Checkbox style={{marginLeft:"8px"}} value={item.code} key={i} >{item.value}</Checkbox>
                                    )
                                  })
                                }
                            </CheckboxGroup>
                            )
                        }      
                    </FormItem>
                    {
                        this.props.modalType == '2'?
                        <FormItem label="认证图片" {...formItemLayout}>
                            <Spin spinning={this.state.loading} style={{width:"80px"}}>
                                <Upload {...uploadImg}>
                                    <img style={{width:"80px",verticalAlign:"bottom",marginRight:"10px",cursor:'pointer'}} 
                                        src={this.state.addImg ? this.state.addImg :require('../../images/baseHeader.png')}
                                    />
                                </Upload>
                            </Spin>                              
                        </FormItem>
                        :''
                    }
                    <FormItem label="关于大咖" {...formItemLayout}>
                        {
                            getFieldDecorator('aboutMaster', {
                                rules: [{
                                    required: true,message:"此项必填"
                                }],
                            })(
                                <Input.TextArea placeholder="请输入关键字" size="default" style={{ width: '400px',height:'100px', resize:'none' }} />
                            )
                        }      
                    </FormItem>
                </Form>
            </Modal>
        )
    }
}